<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
		<title>1-分类_tab_PxCook</title>
		<meta name="apple-mobile-web-app-capable" content="yes">
    	<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../dist/css/sm.css" />
		<link rel="stylesheet" href="../dist/css/sm-extend.css" />
		<!--以上是引用SUI框架css文件代码-->
		<link rel="stylesheet" href="css/1-分类_tab_PxCook.css" />
		<link rel="stylesheet" href="css/xh-lxx-autoplay.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-title1.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-content4.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-title2.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-content5.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-items-icon.css" />
	</head>
	<body>
		<div class="page-group">
	        <div class="page page-current">
	        <!-- html代码 ---------Begin -->
	        	<!--标题栏Begin-->
	        	<header class="bar bar-nav">
					<a class="icon pull-left"><img src="img/left.png" alt=""/></a>
				  	<a class="icon pull-right"><img src="img/right.png" alt="" /></a>
				  	<h1 class="title">
				  		<div class="searchbar">
						    <a class="searchbar-cancel">取消</a>
						    <div class="search-input">
						      <label class="icon icon-search" for="search"></label>
						      <input type="search" id='search' placeholder='请输入检索关键字'/>
						    </div>
						</div>
				  	</h1>
				</header>
				<!--标题栏 End-->
	        	<!--标签页Begin-->
				<div class="content">
				    <div class="buttons-tab">
					    <a href="#tab1" class="tab-link active button">栏目名称</a>
					    <a href="#tab2" class="tab-link button">栏目2</a>
					    <a href="#tab3" class="tab-link button">栏目3</a>
					    <a href="#tab4" class="tab-link button">栏目4</a>
					    <a href="#tab5" class="tab-link button">栏目5</a>
					    <a href="#tab6" class="tab-link button">栏目6</a>
					    <a href="#tab7" class="tab-link button">栏目7</a>
					    <a href="#tab8" class="tab-link button">栏目名称8</a>
					    <a href="#tab9" class="tab-link button">栏目名称9</a>
					    <a href="#tab10" class="tab-link button">栏目名称10</a>
					    <a href="#tab11" class="tab-link button">栏目名称11</a>
					    <a href="#tab12" class="tab-link button">栏目名称12</a>
					    <a href="#tab13" class="tab-link button">栏目名称13</a>
					    <a href="#tab14" class="tab-link button">栏目名称14</a>
					    <a href="#tab15" class="tab-link button">栏目名称15</a>
					    <a href="#tab16" class="tab-link button">栏目名称16</a>
					    <a href="#tab17" class="tab-link button">栏目名称17</a>
					    <a href="#tab18" class="tab-link button">栏目名称18</a>
					    <a href="#tab19" class="tab-link button">栏目名称19</a>
					    <a href="#tab20" class="tab-link button">栏目名称20</a>
					    <a href="#tab21" class="tab-link button">栏目名称21</a>
				    </div>

				    <div class="tabs">
				    	<!--标签tab1内容 Begin-->
					    <div id="tab1" class="tab active">
					        <!-- Swiper 自动轮播-->
						    <div class="swiper-container1">
						        <div class="swiper-wrapper">
						            <div class="swiper-slide1">
						            	<img src="img/59530a31N1a765f92.jpg" alt="" />
						            </div>
						            <div class="swiper-slide1">
						            	<img src="img/5965df18Nee9fd7b6.jpg" alt="" />
						            </div>
						            <div class="swiper-slide1">
						            	<img src="img/59662e5bNa454c17d.jpg" alt="" />
						            </div>
						        </div>
						        <!-- Add Pagination -->
						        <div class="swiper-pagination"></div>
						    </div>
						    <!--右侧标签页的标题1-->
				        	<div class="xh-lxx-tab-title1">
				        		<h2>专场推荐</h2>
				        	</div>
						    <!--内容2-->
					        <div class="xh-lxx-tab-content4">
				        		<div class="content4">
				        			<img src="img/58105de0N88f8372b.jpg" alt="" />
				        			<h3>栏目文案可换两行显示</h3>
				        		</div>
				        		<div class="content4">
				        			<img src="img/58105de0N88f8372b.jpg" alt="" />
				        			<h3>栏目文案可换两行显示</h3>
				        		</div>
				        		<div class="content4">
				        			<img src="img/58105de0N88f8372b.jpg" alt="" />
				        			<h3>栏目文案可换两行显示</h3>
				        		</div>
				        	</div>
					        <!--右侧标签页的标题2-->
				        	<div class="xh-lxx-tab-title2">
				        		<h2>热门分类</h2>
				        		<a href="#">
				        			<span class="icon icon-picture"></span>
				        			<span class="paihang">排行榜</span>
				        			<span class="icon icon-right"></span>
				        		</a>
				        	</div>
					        <!--右侧标签页的内容3-->
				        	<div class="xh-lxx-tab-content5">
			        			<a class="content5">
				        			<img src="img/58105de0N88f8372b.jpg" alt="" />
				        			<h3>栏目文案</h3>
				        		</a>
				        		<a class="content5">
				        			<img src="img/583d461fNc90d345f.jpg" alt="" />
				        			<h3>栏目文案</h3>
				        		</a>
				        		<a class="content5">
				        			<img src="img/58105de0N88f8372b.jpg" alt="" />
				        			<h3>栏目文案</h3>
				        		</a>
			        			<a class="content5">
				        			<img src="img/58105de0N88f8372b.jpg" alt="" />
				        			<h3>栏目文案</h3>
				        		</a>
				        		<a class="content5">
				        			<img src="img/583d461fNc90d345f.jpg" alt="" />
				        			<h3>栏目文案</h3>
				        		</a>
				        		<a class="content5">
				        			<img src="img/58105de0N88f8372b.jpg" alt="" />
				        			<h3>栏目文案</h3>
				        		</a>
			        			<a class="content5">
				        			<img src="img/58105de0N88f8372b.jpg" alt="" />
				        			<h3>栏目文案</h3>
				        		</a>
				        		<a class="content5">
				        			<img src="img/583d461fNc90d345f.jpg" alt="" />
				        			<h3>栏目文案</h3>
				        		</a>
				        		<a class="content5">
				        			<img src="img/58105de0N88f8372b.jpg" alt="" />
				        			<h3>栏目文案</h3>
				        		</a>
			        	</div>
					        
					        
					    </div>
					    <!--标签tab1内容 End-->
					    <div id="tab2" class="tab">
					        <div class="content-block">
					           <p>This is tab 2 content</p>
					        </div>
					    </div>
					    <div id="tab3" class="tab">
					        <div class="content-block">
					           <p>This is tab 3 content</p>
					        </div>
				      	</div>
				      	<div id="tab4" class="tab">
					        <div class="content-block">
					           <p>This is tab 4 content</p>
					        </div>
					    </div>
					    <div id="tab5" class="tab">
					        <div class="content-block">
					           <p>This is tab 5 content</p>
					        </div>
				      	</div>
				      	<div id="tab6" class="tab">
					        <div class="content-block">
					           <p>This is tab 6 content</p>
					        </div>
					    </div>
					    <div id="tab7" class="tab">
					        <div class="content-block">
					           <p>This is tab 7 content</p>
					        </div>
				      	</div>
				      	<div id="tab8" class="tab">
					        <div class="content-block">
					           <p>This is tab 8 content</p>
					        </div>
					    </div>
					    <div id="tab9" class="tab">
					        <div class="content-block">
					           <p>This is tab 9 content</p>
					        </div>
				      	</div>
				      	<div id="tab10" class="tab">
					        <div class="content-block">
					           <p>This is tab 10 content</p>
					        </div>
					    </div>
					    <div id="tab11" class="tab">
					        <div class="content-block">
					           <p>This is tab 11 content</p>
					        </div>
				      	</div>
				      	<div id="tab12" class="tab">
					        <div class="content-block">
					           <p>This is tab 12 content</p>
					        </div>
					    </div>
					    <div id="tab13" class="tab">
					        <div class="content-block">
					           <p>This is tab 13 content</p>
					        </div>
				      	</div>
				      	<div id="tab14" class="tab">
					        <div class="content-block">
					           <p>This is tab 14 content</p>
					        </div>
					    </div>
					    <div id="tab15" class="tab">
					        <div class="content-block">
					           <p>This is tab 15 content</p>
					        </div>
				      	</div>
				      	<div id="tab16" class="tab">
					        <div class="content-block">
					           <p>This is tab 16 content</p>
					        </div>
					    </div>
					    <div id="tab17" class="tab">
					        <div class="content-block">
					           <p>This is tab 17 content</p>
					        </div>
				      	</div>
				      	<div id="tab18" class="tab">
					        <div class="content-block">
					           <p>This is tab 18 content</p>
					        </div>
				      	</div>
				      	<div id="tab19" class="tab">
					        <div class="content-block">
					           <p>This is tab 19 content</p>
					        </div>
					    </div>
					    <div id="tab20" class="tab">
					        <div class="content-block">
					           <p>This is tab 20 content</p>
					        </div>
				      	</div>
				      	<div id="tab21" class="tab">
					        <div class="content-block">
					           <p>This is tab 21 content</p>
					        </div>
				      	</div>
				  </div>
				</div>
	        	<!--标签页End-->
	        	<!--工具栏 Begin-->
	        	<nav class="bar bar-tab xh-lxx-tab-items-icon">
				  <a class="tab-item external" href="../index.html">
				    <span class="icon icon-home"></span>
				    <span class="tab-label">首页</span>
				  </a>
				  <a class="tab-item external active" href="#">
				    <span class="icon icon-menu"></span>
				    <span class="tab-label">分类</span>
				  </a>
				  <a class="tab-item external" href="../1-发现_tab_PxCook/1-发现_tab_PxCook.html">
				    <span class="icon icon-search"></span>
				    <span class="tab-label">发现</span>
				  </a>
				  <a class="tab-item external" href="../1-购物车_tab_PxCook/1-购物车_tab_PxCook.html">
				    <span class="icon icon-cart"></span>
				    <span class="tab-label">购物车</span>
				  </a>
				  <a class="tab-item external" href="../1-我的_tab_PxCook/1-我的_tab_PxCook.html">
				    <span class="icon icon-me"></span>
				    <span class="tab-label">我的</span>
				    <span class="badge">2</span>
				  </a>
				</nav>
	        	<!--工具栏 End-->
	        
	       
	        
	        <!-- html代码 End -->
	        </div>
   		</div>
	
		<!--以下是引用SUI框架js文件代码-->
		<script src='../dist/js/zepto.min.js'></script>
	    <script src="../dist/js/sm.js"></script>
	    <script src="../dist/js/sm-extend.min.js"></script>
	    <script src="js/swiper.js"></script>
		<script>
			$.init(); //初始化
	    </script>
	</body>
</html>
